<template>
  <div style="border: 1px solid black; padding: 20px">
    <div>子组件：</div>
    <div>{{ props.a }}</div>
    <!-- 在模版中，也可省略props -->
    <div>{{ a }}</div>
    <button @click="customEvent">子组件自定义事件</button>
  </div>
</template>
<script setup lang="ts">
//-----------组件属性--------------
//defineProps是vue3内置的函数，无需引入，返回值是一个Proxy对象(注意：传入的属性是只读的)
let props = defineProps({ a: String }) //定义组件属性a，类型String

//-----------组件自定义方法--------------
//defineEmits是vue3内置的函数，无需引入，返回值是一个函数，用于触发组件事件：(event, ...args) => instance.emit(event, ...args)
// let $emit = defineEmits(['getChildInfo']) //抛出事件列表
let $emit = defineEmits<{
  getChildInfo: [id: string]
}>()
const customEvent = () => {
  $emit('getChildInfo', '组件抛出的数据')
}

//-----------useAttrs 获取所有属性+事件--------------
// useAttrs 可以直接获取所有获取所有属性+事件（返回的是一个proxy）。
// 属性：可以直接在模板中使用$attrs.xxx来显示xxx属性
// 事件：组件绑定@xxx="yyy"，接收到$attrs.onXxx:函数体
// 注意defineProps、defineEmits优先级高。例如：如果使用了defineProps(['a'])，则useAttrs获取到的属性中会被去掉a属性
import { useAttrs } from 'vue'
const $attrs = useAttrs()
console.log('prop案例 --> ', $attrs)
</script>
<style lang="css"></style>
